<template>
  <!--工匠学院申报页-->
  <div class="information_declaration_page_container">
    <!--顶部宣传背景及标题区域-->
    <div class="top_container">
      <!--版心中心-->
      <div class="banner_center top_banner_container">
        <!--图标及标题-->
        <div class="icon_container">
        </div>
        <div class="title_container">{{pageOption.pageTitle}}</div>
      </div>
    </div>
    <!--核心内容区域-->
    <div class="core_container margin_top-30">
      <div class="banner_center">
        <!--申报流程-->
        <DeclareProcessList
            :declare-title="pageOption.declareProcessTitle"
            :process-list="pageOption.declareProcessList"
            :download-url="pageOption.declareMaterialDownloadUrl"
        />
        <!--信息填报及文件上传-->
        <div class="upload_text_container margin_top-30">
          信息填报及文件上传
        </div>
        <!--基本信息标题-->
        <SubTitle class="margin_top-30" :sub-title="pageOption.basicInfoTitle"/>
        <BasicInfoForm ref="basicInfoFormRef" v-model="pageOption.basicInfoFormData"/>
        <!--证明材料上传标题-->
        <SubTitle class="margin_top-30" :sub-title="pageOption.declareMaterialTitle"/>
        <!--文件上传列表容器-->
        <div class="upload_container margin_top-30" >
          <FileUpload :upload-file="item" v-for="(item,index) in pageOption.uploadList" :key="index"/>
          <div v-for="(item,index) in 3" :key="index" class="placeholder_container"></div>
        </div>
        <!--提交按钮-->
        <div class="submit_btn_container ">
          <el-button type="primary" size="large"  @click="submitForm">申报材料提交</el-button>
        </div>
      </div>
    </div>
    <!--底部区域-->
    <div class="bottom_container">
      <div class="bottom_center banner_center">
        {{pageOption.copyright}}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {pageBaseData} from "./data";
import {computed, reactive,ref} from "vue";
//申报流程组件
import DeclareProcessList from "./components/DeclareProcessList/index.vue"
//副标题组件
import SubTitle from "./components/SubTitle/index.vue"
//基础信息表单
import BasicInfoForm from "./components/BaseInfoForm/index.vue"
//文件上传组件
import FileUpload from "./components/FileUpload/index.vue"
//表单的ref
const basicInfoFormRef = ref<InstanceType<typeof BasicInfoForm> | null>(null)
/**
 * @description 初始化页面数据
 * @author 莫若省
 * @createTime 2024/6/24
*/
const initPageData = ()=>pageBaseData;
const pageOption = reactive(initPageData())
/**
 * @description 动态计算页面背景图的样式
 * @author 莫若省
 * @createTime 2024/6/24
*/
const setBackgroundImage = computed(()=>`url("${pageOption.backgroundImg}")`)
/**
 * @description 计算页面logo的样式
 * @author 莫若省
 * @createTime 2024/6/24
*/
const setLogoImage = computed(()=>`url("${pageOption.icon}")`)
/**
 * @description 重置页面数据
 * @author 莫若省
 * @createTime 2024/6/24
*/
/**
 * @description 页面信息提交
 * @author 莫若省
 * @createTime 2024/6/24
*/
const submitForm = async()=> {
  try {
    //进行表单校验
    await  basicInfoFormRef.value!.validateForm()
    //TODO 表单提交逻辑自行实现
    alert(JSON.stringify(pageOption))
    //高效重置数据
    window.location.reload()
  }catch (e) {
    console.log(e)
  }
}
</script>
<style scoped lang="scss">
//页面整体样式
.information_declaration_page_container {
  height: 100%;
}
//顶部宣传背景及标题区域
.top_container {
  height: 360px;
  border-bottom: 50px solid $theme-color;
  background-image: v-bind(setBackgroundImage);
  background-size: cover;
  background-repeat: no-repeat;

}
//版心中心
.banner_center {
  width: $container-width;
  margin: 0 auto;
}
//顶部容器
.top_banner_container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
}
//图标及标题
.icon_container {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  background-image: v-bind(setLogoImage);
  background-size: cover;
  background-repeat: no-repeat;
}
.title_container {
  font-size: 36px;
  font-weight: bold;
  color: $theme-color;
}
//核心内容区域
.core_container {
  min-height: 600px;
  background-color: $theme-color-white;
}
//底部区域
.bottom_container {
  height: 20px;
  background-color: $theme-color;
}
.bottom_center {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: $font-size;
  color: $font-color;
}
.upload_text_container {
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  background-color: $theme-color-gray;
}
.upload_container {
  min-height: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.submit_btn_container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}
//占位容器,优化弹性合作布局填充问题
.placeholder_container {
  width: 340px;
}
</style>
